import { Meta, Canvas } from '@storybook/addon-docs';

<Meta title="Design system/Navigation/Tabs" />

# Tabs

<Canvas>
  <div class="border-b border-gray-200 mb-lg bg-legacybg">
    <nav class="flex space-x-4" aria-label="Tabs">
      <a
        href="#!"
        class="border-transparent text-muted hover:border-gray-300 whitespace-nowrap py-xs px-sm border-b-2 font-semibold"
      >
        Browse Rows
      </a>
      <a
        href="#!"
        class="border-transparent text-muted hover:border-gray-300 whitespace-nowrap py-xs px-sm border-b-2 font-semibold"
      >
        Insert Row
      </a>
      <a
        href="#!"
        class="border-yellow-500 text-yellow-500 whitespace-nowrap py-xs px-sm border-b-2 font-semibold"
        aria-current="page"
      >
        Modify
      </a>
      <a
        href="#!"
        class="border-transparent text-muted hover:border-gray-300 whitespace-nowrap py-xs px-sm border-b-2 font-semibold"
      >
        Relationships
      </a>
      <a
        href="#!"
        class="border-transparent text-muted hover:border-gray-300 whitespace-nowrap py-xs px-sm border-b-2 font-semibold"
      >
        Permissions
      </a>
    </nav>
  </div>
</Canvas>

## What are tabs?

Tabs are in-page navigation to move within modules of our application.

Tabs are considered part of the header unit and would have the larger margin between it and the rest of the body content.
